<template>
	<div>
		<vxe-table border resizable :tree-config="{ children: 'children' }" :expand-config="tableExpand" :data="tableData">
			<vxe-table-column type="expand" width="100" title="详细信息">
				<template #content="{ row }">
					<div>
						<el-form :model="form" size="small" label-width="100px">
							<el-row :gutter="36">
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">公司名称：</span>
										{{ row.company }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">担任职务：</span>
										{{ row.job }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">入职日期：</span>
										{{ row.startdate }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">离职日期：</span>
										{{ row.enddate }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">劳动纠纷：</span>
										无
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">违纪违规：</span>
										无
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">薪酬福利：</span>
										{{ row.wealfare }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">离职原因：</span>
										{{ row.leavereason }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="" style="white-space: pre-wrap">
										<span style="color: #99a9bf">工作内容：</span><br />{{ row.jobcontent }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="" style="white-space: pre-wrap">
										<span style="color: #99a9bf">工作成果：
											<router-link to='/personal_archives/undergo'><el-button type="text">点击查看详情</el-button></router-link>
										</span>
										<br />
										{{ row.achievements }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="" style="white-space: pre-wrap">
										<span style="color: #99a9bf">上司评价：
											<router-link to='/personal_archives/undergo'><el-button type="text">点击查看详情</el-button></router-link>
										</span><br />{{ row.bossevaluation}}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="24" :xl="4" class="mb20">
									<el-form-item label="" style="white-space: pre-wrap">
										<span style="color: #99a9bf">同事评价：
											<router-link to='/personal_archives/undergo'><el-button type="text">点击查看详情</el-button></router-link>
										</span><br />{{ row.colleagueevaluation}}
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</template>
			</vxe-table-column>
			<vxe-table-column width="280" field="date" title="时间段"></vxe-table-column>
			<vxe-table-column width="308" field="company" title="就职公司"></vxe-table-column>
			<vxe-table-column width="200" field="job" title="担任职务"></vxe-table-column>
			<vxe-table-column width="200" field="authenticator" title="证明人"></vxe-table-column>
		</vxe-table>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { VxeTablePropTypes } from 'vxe-table';
import XEUtils from 'xe-utils';
export default defineComponent({
	setup() {
		const tableData = ref([
			{
				id: 1000,
				authenticator: '张亮',
				company: '绍兴铭瓯网络科技有限公司',
				job: '实习生',
				date: '2018年10月-2019年04月',
				startdate: '2018-10-01',
				enddate: '2019-04-01',
				leavereason: '学校实习结束',
				wealfare: '3000元/月',
				jobcontent:'1、对项目经理负责，负责软件项目的设计、编码和内部测试的组织实施，对小型软件项目兼任系统分析工作，完成分配项目的实施和技术支持工作。\n2、协助项目经理和相关人员同客户进行沟通，保持良好的客户关系。\n3、参与需求调研、项目可行性分析、技术可行性分析和需求分析。\n4、熟悉并熟练掌握交付软件部开发的软件项目的相关软件技术。\n5、负责向项目经理及时反馈软件开发中的情况，并根据实际情况提出改进建议。\n6、参与软件开发和维护过程中重大技术问题的解决，参与软件首次安装调试、数据割接、用户培训和项目推广。\n7、负责相关技术文档的拟订。\n8、负责对业务领域内的技术发展动态进行分析研究。\n',
				achievements: '1、配合全友家私开发并完善SRM系统 | 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven\n2、独自开发全友家私SAP日志维护系统 | 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven',
				bossevaluation:'       该员工工作认真，脚踏实地，关心同事。虽然工作性质繁琐、复杂，但她能平和的对待，处理事情有条不紊，工作总能自觉、认真、细致地完成，受到办公室成员一致好评。工作中她能够站在公司的角度，经常提出合理化建议，为部门的管理出谋策划，是领导的好助手。',
				colleagueevaluation:'       我的同事做事很认真、不慌不乱、积极主动、独立工作能力强；思想成熟、个性稳重、具高度责任感；年轻、聪明、精力充沛，并有很强的事业心；有很高的领导艺术和很强的集体精神，并有良好的交际技能，具有良好而广泛的社会关系；善于出谋划策，专业技能优秀，为公司创造更多效益；工作态度端正，业绩比较突出，把公司当成自己的事业一样去对待。',
			},
			{
				id: 1005,
				authenticator: '过韵',
				company: '绍兴慧怿网络科技有限公司',
				job: '程序员',
				date: '2019年05月-2020年01月',
				startdate: '2019-05-01',
				enddate: '2020-01-01',
				leavereason: '工作遇到瓶颈，想换一个方向',
				wealfare: '7000元/月  五险一金  年底双薪  额外年假  车补  饭补',
				jobcontent: '1、负责软件项目的详细设计、编码和内部测试的组织实施，对小型软件项目兼任系统分析工作，完成分配项目的实施和技术支持工作。\n2、协助项目经理和相关人员同客户进行沟通，保持良好的客户关系。\n3、参与需求调研、项目可行性分析、技术可行性分析和需求分析。\n4、熟悉并熟练掌握交付软件部开发的软件项目的相关软件技术。\n5、负责向项目经理及时反馈软件开发中的情况，并根据实际情况提出改进建议。\n6、参与软件开发和维护过程中重大技术问题的解决，参与软件首次安装调试、数据割接、用户培训和项目推广。\n7、负责相关技术文档的拟订。\n8、负责对业务领域内的技术发展动态。',
				achievements: '1、教学督导管理系统| 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven\n2、高校教务信息管理系统| 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven',
				bossevaluation:'       该员工工作经验丰富且熟练，不论是本职工作还是辅助其他岗位的工作，从不斤斤计较。工作认真、负责，能主动帮助其他同事。本着要做就一定要做好的原则，工作中不怕累、不怕苦、善于钻研，是本部门员工学习的榜样。',
				colleagueevaluation:'       我的同事很活泼，有积极灵活的头脑，能够在不同文化和语言下出色地工作，善于同各种人员打交道，有良好的人员管理交际能力，良好的组织能力。',
			},
			{
				id: 23666,
				authenticator: '李自来',
				company: '上海坤亨信息技术有限公司',
				job: '产品经理',
				date: '2020年02月-2020年06月',
				startdate: '2020-02-01',
				enddate: '2020-06-01',
				leavereason: '在目前的工作上已经得心应手，并且没有了成长空间，也没有合适的上升通道',
				wealfare: '7500元/月  五险一金  年底双薪  额外年假',
				jobcontent: '1、贯彻执行国家、行政主管部门有关法律、法规、政策和标准，执行公司的各项管理制度。\n2、经授权组建项目部，确定项目部的组织机构，选择聘用管理人员，根据质量/环境/职业健康安全管理体系要求确定管理人员职责，并定期进行考核、评价和奖惩。\n3、负责在本项目内贯彻落实公司质量/环境/职业健康安全方针和总体目标，主持制定项目质量/环境/职业健康安全目标。\n4、负责对项目实施全过程、全面管理，组织制定项目部的各项管理制度。\n5、严格履行与建设单位签订的合同和与公司签订的“项目管理目标责任书”并进行阶段性目标控制，确保项目目标的实现。\n6、严格财务制度，建立成本控制体系，加强成本管理，搞好经济分析与核算。\n7、积极开展市场调查，主动收集工程建设信息，参与项目追踪、公关、进行区域性市场开发和本项目后续工程的滚动开发工作。\n8、协助公司完成项目的检查、鉴定和评奖申报工作。\n9、负责协调处理项目部的内部与外部事项。\n10、完成领导交办的其它工作。',
				achievements: '1、Royaltea皇茶网站| 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven',
				bossevaluation:'       该员工拥有良好的个人形象和素养，专业技能或业务水平优秀，为公司利益不计个人得失，对本职工作兢兢业业，锐意进取，为公司员工树立良好形象并起到带头作用',
				colleagueevaluation:'       我的同事有较强的分析能力、工作认真、责任心强；知识渊博，说起人文地理滔滔不绝；性格直率、待人坦诚、不拘小节，性格很好就是心太软；良好的个人形象和素养，为公司员工树立良好形象并起到带头作用；专业技能优秀，对本职工作兢兢业业，锐意进取。特别是有一次项目设计的，因为时间很紧，周末都从家里赶到公司加班。但是不善于利用自己的权利。',
			},
			{
				id: 24555,
				authenticator: '杜亦纯',
				company: '杭州源宏信息网络发展有限公司',
				job: '产品经理',
				date: '2020年06月-2021年01月',
				startdate: '2020-06-01',
				enddate: '2021-01-01',
				leavereason: '想通过跳槽，实现职位的提升和薪资的提升',
				wealfare: '10000元/月;五险一金;年底双薪;额外年假',
				jobcontent: '1、贯彻执行国家、行政主管部门有关法律、法规、政策和标准，执行公司的各项管理制度。\n2、经授权组建项目部，确定项目部的组织机构，选择聘用管理人员，根据质量/环境/职业健康安全管理体系要求确定管理人员职责，并定期进行考核、评价和奖惩。\n3、负责在本项目内贯彻落实公司质量/环境/职业健康安全方针和总体目标，主持制定项目质量/环境/职业健康安全目标。\n4、负责对项目实施全过程、全面管理，组织制定项目部的各项管理制度。\n5、严格履行与建设单位签订的合同和与公司签订的“项目管理目标责任书”并进行阶段性目标控制，确保项目目标的实现。\n6、严格财务制度，建立成本控制体系，加强成本管理，搞好经济分析与核算。\n7、积极开展市场调查，主动收集工程建设信息，参与项目追踪、公关、进行区域性市场开发和本项目后续工程的滚动开发工作。\n8、协助公司完成项目的检查、鉴定和评奖申报工作。\n9、负责协调处理项目部的内部与外部事项。\n10、完成领导交办的其它工作。',
				achievements: '1、知心旅行网 | 项目工具：Spring+SpringMVC+Mybatis+Nginx+Maven',
				bossevaluation:'       该员工勤恳务实，善于学习，对本职工作兢兢业业，注重个人成长;工作成绩进步大，业绩发展迅速，或有效改进自己的工作方式，从而在工作中收到良好效果;悟性较强。',
				colleagueevaluation:'       我的同事工作认真，肯学习进取，态度非常好，能够虚心接受同事给予的建议并改正，且工作配合度也好，能主动协助其他同事工作；服从整体安排，积极参加公司活动；性格随和，热爱劳动，与同事相处和谐。',
			},
		]);

		const tableExpand = ref({
			lazy: true,
			loadMethod({ row }) {
				return new Promise((resolve) => {
					setTimeout(() => {
						// 随机生成列
						const childCols = XEUtils.sample(
							[
								{ type: 'seq', title: 'Sequence' },
								{ field: 'name', title: 'Name' },
								{ field: 'role', title: 'Role' },
								{ field: 'age', title: 'Age' },
								{ field: 'sex', title: 'Sex' },
							],
							XEUtils.random(3, 5)
						);
						// 随机生成数据
						const childData = XEUtils.sample(
							[
								{ name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
								{ name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
								{ name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
								{ name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
								{ name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
								{ name: 'TEST6', role: 'Develop', age: 30, sex: '男' },
							],
							XEUtils.random(1, 5)
						);
						row.childCols = childCols;
						row.childData = childData;
						resolve();
					}, 500);
				});
			},
		} as VxeTablePropTypes.ExpandConfig);

		return {
			tableData,
			tableExpand,
		};
	},
});
</script>
<style lang="scss">
</style>